<template>
	<div class="home-container layout-pd">
		<div class="home-card-one mb20">
			<div class="el-form-sub-title font-bold">常用功能</div>
			<el-row :gutter="15">
				<el-col
					:xs="8"
					:sm="6"
					:md="6"
					:lg="3"
					:xl="3"
					v-for="(v, k) in state.homeOne"
					:key="k"
					:class="{ 'home-media home-media-lg': k > 3, 'home-media-sm': k === 1 }"
				>
					<div class="home-card-item text-center" @click="$router.push(v.path)">
						<el-image :src="v.icon" style="width: 64px; height: 64px" mode="cover" />
						<div class="font14 font-bold mt10">{{ v.name }}</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="home-card-two mb20">
			<div class="el-form-sub-title font-bold">待办事项</div>
			<el-row :gutter="15">
				<el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4" v-for="(v, k) in state.toDoItem" :key="k">
					<div class="home-card-item text-center" @click="$router.push(v.path)">
						<div style="opacity: 0.7" class="font14">{{ v.name }}</div>
						<div class="font28 mt8">{{ dashboardData.toDoItem[v.code] }}</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="mb20">
			<el-row :gutter="15">
				<el-col :span="16">
					<div class="home-card-three">
						<div class="el-form-sub-title font-bold">订单数据</div>
						<el-row :gutter="15" justify="space-around">
							<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4" v-for="(v, k) in state.marketDashboard" :key="k">
								<div class="home-card-item text-center" :style="{ backgroundColor: v.bgColor }" @click="$router.push(v.path)">
									<div style="opacity: 0.7" class="font14">{{ v.name }}</div>
									<div class="font28 mt8">{{ dashboardData.marketDashboard[v.code] }}</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<div class="home-card-four mt20">
						<div class="flex-between el-form-sub-title font-bold">
							交易概况
							<span class="time">数据截止{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</span>
						</div>
						<el-row :gutter="15" justify="space-around">
							<el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4" v-for="(v, k) in state.marketData" :key="k">
								<div class="home-card-item text-center">
									<div style="opacity: 0.7" class="font14">{{ v.name }}</div>
									<el-tooltip placement="top" :content="v.isPrice ? fenToYuan(dashboardData.marketData[v.code]) : dashboardData.marketData[v.code]"
										><span class="font28 mt8">{{
											v.isPrice ? moneyFormat(dashboardData.marketData[v.code]) : dashboardData.marketData[v.code]
										}}</span></el-tooltip
									>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="home-card-five">
						<div class="flex-between el-form-sub-title font-bold mb35 mt10">
							通知公告
							<el-button link type="primary" @click="$router.push('/system/notice')">更多</el-button>
						</div>
						<div class="notice">
							<div v-if="dashboardData.noticeList.length" class="item flex-between mb33" v-for="(v, i) in dashboardData.noticeList" :key="i">
								<span class="ellipsis1">
									{{ v.content }}
									订单编号：
									<el-link type="primary" :underline="false" class="color-primary" @click="$router.push(`/order/query/detail/${v.orderId}`)">
										{{ v.orderNo }}
									</el-link>
								</span>
								<span class="ml19 time">{{ dayjs(v.date).format('MM/DD') }}</span>
							</div>
							<el-empty v-else style="padding-top: 10px" description="暂无通知" />
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import { onMounted, reactive, ref } from 'vue';
import { fetchDashboardData } from '/@/api/home';
import icon1 from '/@/assets/images/icon-8.png';
import icon2 from '/@/assets/images/icon-1.png';
import icon3 from '/@/assets/images/icon-2.png';
import icon4 from '/@/assets/images/icon-3.png';
import icon5 from '/@/assets/images/icon-4.png';
import icon6 from '/@/assets/images/icon-5.png';
import icon7 from '/@/assets/images/icon-6.png';
import icon8 from '/@/assets/images/icon-7.png';
import dayjs from 'dayjs';
import { fenToYuan, moneyFormat } from '/@/utils/commonFunction';

const state = reactive({
	global: {
		homeChartOne: null,
		homeChartTwo: null,
		homeCharThree: null,
		dispose: [null, '', undefined],
	} as any,
	homeOne: [
		{
			icon: icon1,
			name: '订单查询',
			path: '/order/query',
		},
		{
			icon: icon2,
			name: '退款售后',
			path: '/fulfill/after-sale',
		},
		{
			icon: icon3,
			name: '商品查询',
			path: '/goods/list',
		},
		{
			icon: icon4,
			name: '酒藏查询',
			path: '/liquor-cert/monitoring',
		},
		{
			icon: icon5,
			name: '用户查询',
			path: '/user/list',
		},
		{
			icon: icon6,
			name: '广告管理',
			path: '/advertisement/list',
		},
		{
			icon: icon7,
			name: '活动管理',
			path: '/activity/list',
		},
		{
			icon: icon8,
			name: '内容管理',
			path: '/content/subject',
		},
	],
	toDoItem: [
		{
			name: '待采购需求单',
			code: 'pendingPurchaseOrderCount',
			path: '/fulfill/demand',
		},
		{
			name: '待业务审核商品',
			code: 'pendingBizAuditProductCount',
			path: '/goods/list?status=2',
		},
		{
			name: '待财务审核商品',
			code: 'pendingFinanceAuditProductCount',
			path: '/goods/list?status=3',
		},
		{
			name: '待审核内容',
			code: 'pendingAuditContentCount',
			path: '/content/creation?status=1',
		},
		{
			name: '待审核活动',
			code: 'pendingAuditActivityCount',
			path: '/activity/list?status=TO-AUDIT',
		},
		{
			name: '待认证经销商',
			code: 'pendingAuthenticateDealerCount',
			path: '/user/dealer-auth?status=1',
		},
	],
	marketDashboard: [
		{
			name: '待付款订单',
			code: 'pendingPayOrderCount',
			bgColor: '#FFF6E5',
			path: '/order/query?status=0',
		},
		{
			name: '待发货订单',
			code: 'pendingDeliveryOrderCount',
			bgColor: '#FAEFFF',
			path: '/order/query?status=1',
		},
		{
			name: '已发货订单',
			code: 'pendingReceiveOrderCount',
			bgColor: '#EFF4FF',
			path: '/order/query?status=2',
		},
		{
			name: '已完成订单',
			code: 'completeOrderCount',
			bgColor: '#EFFFF4',
			path: '/order/query?status=3',
		},
		{
			name: '待售后订单',
			code: 'afterMarketingOrderCount',
			bgColor: '#FFEFEF',
			path: '/order/query?status=5',
		},
	],
	marketData: [
		{
			name: '销售金额',
			code: 'saleAmount',
			isPrice: true,
		},
		{
			name: '实收金额',
			code: 'actualReceiveAmount',
			isPrice: true,
		},
		{
			name: '支付单数',
			code: 'payCount',
		},
		{
			name: '支付人数',
			code: 'payUserCount',
		},
		{
			name: '客单价',
			code: 'price',
			isPrice: true,
		},
	],
});

const dashboardData = ref<any>({
	toDoItem: {},
	marketDashboard: {},
	marketData: {},
	noticeList: [],
});

onMounted(async () => {
	const res = await fetchDashboardData();
	dashboardData.value = res.data;
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
	overflow: hidden;
	.home-card-one,
	.home-card-two,
	.home-card-three,
	.home-card-four,
	.home-card-five {
		background: var(--el-color-white);
		padding: 20px;
		border-radius: var(--el-border-radius-round);
		.home-card-item {
			width: 100%;
			transition: all ease 0.3s;
			overflow: hidden;
			color: var(--el-text-color-primary);
			cursor: pointer;

			&:hover {
				.el-image {
					opacity: 0.8;
					transition: all ease 0.3s;
				}
			}
		}
	}
	.home-card-one {
		.home-card-item {
			width: max-content;
			margin: auto;
		}
	}
	.home-card-two {
		.home-card-item {
			&:hover {
				color: var(--el-color-primary);
			}
			width: 100%;
			overflow: hidden;
		}
	}
	.home-card-three {
		.home-card-item {
			min-width: 100%;
			border-radius: 14px;
			padding: 16px;
			margin: auto;
			&:hover {
				box-shadow: 0 0 10px #cecece;
			}
		}
	}
	.home-card-four {
		.time {
			background: #f2f5f8;
			height: 32px;
			line-height: 32px;
			border-radius: 18px;
			font-size: 14px;
			font-weight: 400;
			padding: 0 16px;
			color: rgba($color: #000000, $alpha: 0.7);
			flex-shrink: 0;
		}
	}
	.home-card-five {
		padding-bottom: 8px;
		.notice {
			.time {
				color: rgba($color: #000000, $alpha: 0.3);
			}
		}
	}
}
</style>
